<template>
  <div>
    <div class="mb-3">
      <el-button
        v-if="customerData.project_status === '0' || customerData.project_status === '2'"
        type="primary"
        @click="edit()"
      >
        新增贷款信息
      </el-button>
    </div>
    <loading-wrap>
      <el-table border :data="tableData">
        <el-table-column prop="shareholder_name" label="姓名" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.shareholder_name || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="loan_bank" label="银行名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.loan_bank || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="loan_variety" label="贷款品种" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.loan_variety || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="贷款金额" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.loan_funds | pureUnit('万元') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="剩余贷款" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.loan_left | pureUnit('万元') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="开始时间" align="center" width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.start_date">
              {{ $utils.dateFormat(scope.row.start_date, 'yyyy.MM.dd') }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" align="center" width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.end_date">
              {{ $utils.dateFormat(scope.row.end_date, 'yyyy.MM.dd') }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="overdue_count" label="逾期次数" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.overdue_count || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="逾期金额" align="center">
          <template slot-scope="scope">
            {{ scope.row.overdue_amount | pureUnit('万元') }}
          </template>
        </el-table-column>
        <el-table-column label="逾期时间" width="100px" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.overdue_date">
              {{ $utils.dateFormat(scope.row.overdue_date, 'yyyy.MM.dd') }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="overdue_duration" label="逾期时长" align="center">
          <template slot-scope="scope">
            {{ scope.row.overdue_duration || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="return_situation" label="归还情况" align="center">
          <template slot-scope="scope">
            {{ scope.row.return_situation || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
          <template slot-scope="scope">
            {{ scope.row.remark || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="!onFile" align="center">
          <template slot-scope="scope">
            <el-button type="text" class="py-0 px-1" @click="edit(scope.row)">
              <i class="fa fa-edit"></i>
            </el-button>
            <el-button type="text" class="py-0 px-1 text-danger" @click="deleteData(scope.row)">
              <i class="fa fa-trash"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </loading-wrap>

    <form-component
      ref="fc"
      :visible.sync="editVisible"
      :table-name="tableName"
      :form-data="formData"
      :table-id="tableId"
      :table-data="editData"
      :auto-init="false"
      @success="getData"
    ></form-component>
  </div>
</template>
<script>
import FormComponent from '@/components/FormComponent'
import SelectPerson from '@/credit/components/select/SelectPerson'
export default {
  components: {
    FormComponent,
  },
  props: {},
  data() {
    return {
      editVisible: false,
      tableName: 'datum_customer_credit',
      formData: {
        datum_customer_shareholder_id: {
          type: 'component',
          label: '姓名',
          value: '',
          required: true,
          component: SelectPerson,
          attrs: {
            css: 'form-control-ml',
          },
        },
        credit_type: { type: 'text', hide: true, value: '1' },
        loan_bank: {
          type: 'text',
          label: '银行名称',
          value: '',
          required: true,
          // enumType: {},
          attrs: { css: 'form-control-ml' },
        },
        loan_variety: { type: 'text', label: '贷款品种', value: '' },
        loan_funds: { type: 'number', label: '贷款金额', value: '', unit: '万元' },
        loan_left: { type: 'number', label: '剩余贷款', value: '', unit: '万元' },
        overdue_count: { type: 'number', label: '逾期次数', value: '', step: 1 },
        overdue_amount: {
          type: 'number',
          label: '逾期金额',
          value: '',
          unit: '万元',
          step: 0.0001,
        },
        start_date: { type: 'date', label: '开始时间', value: '' },
        end_date: { type: 'date', label: '结束时间', value: '' },
        overdue_date: { type: 'date', label: '逾期时间', value: '' },
        overdue_duration: { type: 'number', label: '逾期时长', value: '', unit: '天', step: 1 },
        return_situation: { type: 'text', label: '归还情况', value: '' },
        remark: { type: 'text', label: '备注', value: '' },
      },
      editData: {},
      tableId: '',
      tableData: [],
    }
  },
  computed: {
    onFile() {
      return this.customerData.project_status === '1' || this.customerData.project_status === '3'
    },
  },
  watch: {},
  created() {
    this.customerData = JSON.parse(sessionStorage.getItem('customer_related_view'))
    this.id = this.$route.query.id || sessionStorage.getItem('customer_related_id')
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      this.$api
        .getData(
          'credit',
          this.tableName,
          {
            'customer_related_id.eq': this.id,
            'credit_type.eq': '1',
          },
          { create_time: 'desc' }
        )
        .then(res => {
          this.tableData = (res && res.data) || []
        })
    },
    edit(p) {
      this.editVisible = true
      this.tableId = p ? p.id : ''
      this.editData = p
    },
    deleteData(item) {
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        message: h('span', undefined, `确定删除？`),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: async (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '删除中...'
            const [res] = await this.$utils.promise(
              this.$api.deleteData('credit', this.tableName, item.id)
            )
            instance.confirmButtonLoading = false
            instance.confirmButtonText = '确定'
            if (res) {
              this.$message.success('删除成功！')
              this.getData()
              done()
            } else {
              this.$message.error('删除失败，请重试！')
            }
          } else {
            done()
          }
        },
      }).catch(() => {})
    },
  },
}
</script>
<style scoped></style>
